<script setup lang="ts">
import { useRoute } from 'vue-router'
import { reactive } from 'vue'

const route = useRoute()

const action = import.meta.env.VITE_APP_BASE_API + '/passport/oauth2/authorize'
const clientId = route.query.client_id
const scope = route.query.scope
const state = route.query.state

let scopes: string[] = []
if (typeof scope === 'string') {
  scopes = scope.split(' ')
}

console.log(clientId)
console.log(scopes)
console.log(state)

const form = reactive({
  scopes: []
})

const onSubmit = () => {
  console.log('submit!')
  const consentForm = document.querySelector('form[name="consentForm"]')
  if (consentForm instanceof HTMLFormElement) {
    consentForm.submit()
  }
}
</script>

<template>
  <div>
    <el-form
      name="consentForm"
      :action="action"
      method="post"
      label-width="auto"
      style="max-width: 600px"
    >
      <input type="hidden" name="client_id" :value="clientId" />
      <input type="hidden" name="state" :value="state" />
      <template v-for="(item, index) in scopes" :key="index">
        <el-form-item :label="item">
          <el-checkbox-group v-model="form.scopes">
            <el-checkbox :value="item" name="scope">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button @click="onSubmit">授权</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped></style>
